<template>
  <div>
    <!-- alert -->
    <v-alert
      class="alert"
      outlined
      type="success"
      text
      v-show="showAlert"
      transition="scroll-y-transition"
    >
      {{ msg }}
    </v-alert>

    <v-alert
      class="alert"
      outlined
      type="error"
      text
      v-show="showAlert2"
      transition="scroll-y-transition">
      请选择开通时长
    </v-alert>




    <v-alert
      class="alert"
      outlined
      :type="successVIP?success:info"
      text
      v-show="showAlert1"
      transition="scroll-y-transition"
    >
      {{ vipmsg }}
    </v-alert>

    <template>
      <v-dialog v-model="dialog" max-width="400">
        <v-card>
          <v-card-title class="headline">
            账户充值
          </v-card-title>
          <v-text-field
            v-model="value"
            label="充值金额"
            class="pa-6"
          ></v-text-field>

          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn color="green darken-1" text @click="handleRecharge">
              充值
            </v-btn>

            <v-btn color="green darken-1" text @click="dialog = false">
              取消
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>


    <template>
      <v-dialog v-model="dialog1" max-width="400">
        <v-card>
          <v-card-title class="headline">
            {{userInfo.isVIP?"续费会员":"开通会员"}}
          </v-card-title>
          <v-select
          :items="vipselect"
          v-model="vipMethod"
          label="开通时长"
          >
          </v-select>
          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn color="green darken-1" text @click="handleOpenVIP">
              {{userInfo.isVIP?"确认续费":"确认开通"}}
            </v-btn>
            <v-btn color="green darken-1" text @click="dialog1 = false">
              俺再想想
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>



    <v-container class="pl-16 pr-16">
      <form class="pa-12 grey lighten-5 mt-8">
        <v-text-field v-model="userInfo.id" label="ID" readonly></v-text-field>
        <v-text-field
          v-model="userInfo.uname"
          label="用户名"
          readonly
        ></v-text-field>
        <v-text-field
          v-model="userInfo.phone"
          label="手机号"
          readonly
        ></v-text-field>
        <v-text-field
          v-model="userInfo.userRole"
          label="用户角色"
          readonly
        ></v-text-field>
        <v-text-field
          v-model="userInfo.endTime"
          label="会员到期时间"
          readonly
          v-show="userInfo.isVIP"
        >
        </v-text-field>

        <v-text-field
          v-model="userInfo.createTime"
          label="注册时间"
          readonly
        ></v-text-field>
        <v-text-field
          v-model="userInfo.balance"
          label="账户余额"
          readonly
        ></v-text-field>

  <v-row>
        <v-btn color="primary" dark @click.stop="dialog = true">
          充值
        </v-btn>
        <v-spacer ></v-spacer>
        <v-btn color="primary" dark @click.stop="dialog1 = true" >
          {{userInfo.isVIP?"续费会员":"开通会员"}}
        </v-btn>
  </v-row>
      </form>
    </v-container>
  </div>
</template>

<script>
import { getUser } from "@/api/user";
import { recharge } from "@/api/recharge";
import {openVIP} from "../../api/user";
import { getIsVIP } from "../../api/user";

export default {
  name: "UserCenter",

  data() {
    return {
      userInfo: {
        id: 0,
        uname: "",
        phone: "",
        password: null,
        picture: null,
        balance: 0,
        userRole: "",
        createTime: "",
        // isVIP : false,
        // endTime: ""

      },
      success : "success",
      info : "info",
      dialog: false,
      dialog1:false,
      showAlert: false,
      showAlert1 :false,
      showAlert2 :false,
      successVIP: false,
      vipmsg:"",
      value: 0,
      msg: "",
      vipMethod :'',

      vipselect : [
        '¥30/一个月',
        '¥70/三个月',
        '¥129/六个月',
        '¥199/一年！'
      ]
    };
  },

  methods: {
    handleRecharge() {
      recharge({ userId: this.userInfo.id, value: this.value }).then(res => {
        console.log(res);
        if (res && res.code === 1) {
          this.msg = res.msg;
          this.dialog = false;
          this.showAlert = true;
          this.refreshUserInfo();
          setTimeout(() => {
            this.showAlert = false;
          }, 1000);
        }
      });
    },

    handleOpenVIP(){
      console.log(this.vipMethod)
        if(this.vipMethod===''){
        this.showAlert2=true;
        setTimeout(()=>{
          this.showAlert2=false;
        },1000);
        return ;
        }
        let vipMonth=0; let vipPrice=0;
        if(this.vipMethod=='¥30/一个月'){
          vipMonth=1; vipPrice=30;
        }
        else if(this.vipMethod=='¥70/三个月'){
          vipMonth=3;vipPrice=70;
        }
        else if(this.vipMethod=='¥129/六个月'){
          vipMonth=6;vipPrice=129;
        }
        else {
          vipMonth=12; vipPrice=199;
        }
      openVIP({
        userId: this.userInfo.id,
        vipMonth:vipMonth,
        vipPrice :vipPrice,
      }).then(
        res=>{
          console.log(res);
          let code=res.code;
            this.successVIP=code===1;
          this.vipmsg = res.msg;
          this.dialog1 = false;
          this.showAlert1 = true;
          this.refreshUserInfo();
          setTimeout(() => {
            this.showAlert1 = false;
          },1000);
        }
      )
    },

    refreshUserInfo() {
      const userId = window.localStorage.getItem("userId");
      getUser(userId).then(res => {
        this.userInfo = res || {};
        console.log(this.userInfo);
      });
      getIsVIP(userId).then(
        r=>
        {
          console.log(r);
          //this.userInfo=r.data || this.userInfo;
          // this.userInfo.isVIP=r.data.isVIP==1;
          // this.userInfo.endTime=r.data.endDate;
           this.$set(this.userInfo,"isVIP",r.data.isVIP===1);
           this.$set(this.userInfo,"endTime",r.data.endDate);
          console.log(this.userInfo);
          //  }

    });
  }},

  mounted() {
    this.refreshUserInfo();
  }
};
</script>

<style scoped>
.alert {
  position: fixed;
  left: 50%;
  top: 100px;
  z-index: 999;
}
</style>
